<template>
  <div class="chat">
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-icon name="revoke" @click="back" />
      </template>
      <template #title>
        {{ user.username }}
      </template>
    </van-nav-bar>
    <div class="chat-list">
      <van-row class="message" type="flex" :justify="item.direction == 'to' ? 'end' : ''" v-for="(item, index) in mesList"
        :key="index">
        <van-col span="16" v-show="item.direction == 'to'">
          <van-col span="20" class="to_text mess">
            <span class="sender">{{ item.message }}</span>
          </van-col>

          <van-col span="4" class="to_text">
            <van-image class="photo" round width="2.5rem" height="2.5rem" :src="'data:image/png;base64,' + me.photo"
              @click="seeOne(me.id)" />
          </van-col>
        </van-col>


        <van-col span="16" v-show="item.direction == 'back'">
          <van-col span="4">
            <van-image class="photo" round width="2.5rem" height="2.5rem" :src="'data:image/png;base64,' + user.photo"
              @click="seeOne(user.id)" />
          </van-col>

          <van-col span="20" class="mess">
            <span class="receiver">{{ item.message }}</span>
          </van-col>

        </van-col>
        <span v-if="index == mesList.length - 1" id="lastchat"></span>
      </van-row>
    </div>

    <van-row class="button">
      <van-col span="19">
        <van-field class="message" v-model="message" rows="1" autosize type="textarea" placeholder="聊聊天"
          @input="inputArea()" />
      </van-col>
      <van-col span="5">
        <van-button id="sub" class="sub" v-show="show" round type="info" @click="submit">发送</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'Chat',
  data() {
    return {
      user: '',
      me: '',
      show: false,
      message: '',
      mesList: [],
      sendTo: '',
      timer: '',
      buttonTimer: '',
    }
  },
  created: function () {
    window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
    this.buttonTimer = setTimeout(() => {
      const lastChat = document.getElementById("lastchat")
      if (lastChat) {
        lastChat.scrollIntoView();//将最下端的数据显示出来
      }

    }, 100);
    const tel = window.localStorage.getItem("dazi_")

    const daziNum = this.$route.query.daziNumber

    this.$axios.get('http://localhost:9090/dazi/user/findUserAllByTel?tel=' + tel)
      .then(res => {
        this.me = res.data

      })

    this.sendTo = daziNum
    this.$axios.get('http://localhost:9090/dazi/user/findUserByDaziNumbere?daziNumber=' + daziNum).then(res => {
      this.user = res.data

      this.$axios.get('http://localhost:9090/dazi/chat/list?senderTel=' + tel + "&receiverTel=" + this.user.phone_number)
        .then(res => {
          this.mesList = res.data

        })
    })

    this.timer = setInterval(() => {

      this.$axios.get('http://localhost:9090/dazi/user/findUserAllByTel?tel=' + tel)
        .then(res => {
          this.me = res.data

        })

      this.sendTo = daziNum
      this.$axios.get('http://localhost:9090/dazi/user/findUserByDaziNumbere?daziNumber=' + daziNum).then(res => {
        this.user = res.data

        this.$axios.get('http://localhost:9090/dazi/chat/list?senderTel=' + tel + "&receiverTel=" + this.user.phone_number)
          .then(res => {
            //解决频繁触底，不能看历史记录问题
            if (this.mesList.length < res.data.length) {
              this.mesList = res.data
              const lastChat = document.getElementById("lastchat")
              lastChat.scrollIntoView();//将最下端的数据显示出来

            }

          })
      })
    }, 1000);


  },
  methods: {
    // 回车和空格键提交右侧信息
    handkeyCode(e) {
      if (e.keyCode === 13) {

        const sub = document.getElementById("sub")

        sub.click()

      }
    },

    back() {
      window.removeEventListener('keydown', this.handkeyCode, true)//关闭监听键盘按下事件
      clearInterval(this.timer);
      clearInterval(this.buttonTimer);
      history.back()
    },
    inputArea() {
      if (this.message.length > 0) {
        this.show = true
      } else {
        this.show = false
      }
    },
    submit() {
      const tel = window.localStorage.getItem('dazi_')
      const mes = { senderTel: tel, receiverTel: this.user.phone_number, message: this.message }
      this.$axios.post('http://localhost:9090/dazi/chat/save', mes)
        .then(res => {
          this.$axios.get('http://localhost:9090/dazi/chat/list?senderTel=' + tel + "&receiverTel=" + this.user.phone_number)
            .then(res => {
              this.mesList = res.data
              this.message = ''
            })
        })

    },
    seeOne(userId) {
      window.removeEventListener('keydown', this.handkeyCode, true)//关闭监听键盘按下事件
      clearInterval(this.timer);
      clearInterval(this.buttonTimer);
      this.$router.push({ path: '/seeOne', query: { userId: userId } })
    },
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chat {
  background-color: beige;
  height: 850px;
}

.mess {
  padding: 10px;

}

.sender {
  background-color: rgb(121, 243, 174);
  padding: 10px;
}

.receiver {
  padding: 10px;
  background-color: rgb(255, 255, 255);
}

.to_text {
  text-align: right;

}

.message {
  margin: 10px 10px;
}

.sub,
.say {
  margin: 10px 0;
}

.button {
  position: fixed;
  bottom: 10px;
  width: 100%;
}

.van-button {
  margin-left: 20px;
}

.chat-list {
  overflow: auto;
  height: 700px;
}
</style>
